<!--
 * @Author: bao
 * @Description: 资产明细列表
 * @Date: 2020-02-02 14:53:02
 -->
<template>
  <div style="padding: 10px 20px; background-color: #fff;">
    <p class="title">资产明细列表</p>
    <div class="btnBox">
      <div class="box">
        <div class="single-search-item">
          <div class="item-label">表名：</div>
          <div class="item-content">
            <a-input
              v-model="getPars.tableEname"
              placeholder=""
              style="width: 240px;"
            />
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">表名中文名：</div>
          <div class="item-content">
            <a-input
              v-model="getPars.tableCname"
              placeholder=""
              style="width: 240px;"
            />
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">数据来源部门：</div>
          <div class="item-content">
            <a-input
              v-model="getPars.sourceDepartment"
              placeholder=""
              style="width: 240px;"
            />
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">资源编号：</div>
          <div class="item-content">
            <a-input
              v-model="getPars.sourceId"
              placeholder=""
              style="width: 240px;"
            />
          </div>
        </div>
        <!-- <div class="single-search-item">
          <div class="item-label">更新周期：</div>
          <div class="item-content">
            <a-input
              v-model="getPars.updateType"
              placeholder=""
              style="width: 240px;"
            />
          </div>
        </div> -->
        <div class="single-search-item">
          <div class="item-label">是否消费：</div>
          <div class="item-content">
            <a-select
              v-model="getPars.isConsume"
              allowClear
              style="width: 240px;"
            >
              <a-select-option value="">无限</a-select-option>
              <a-select-option :value="1">是</a-select-option>
              <a-select-option :value="2">否</a-select-option>
            </a-select>
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">是否订阅：</div>
          <div class="item-content">
            <a-select
              v-model="getPars.isSubscribe"
              allowClear
              style="width: 240px;"
            >
              <a-select-option value="">无限</a-select-option>
              <a-select-option :value="1">是</a-select-option>
              <a-select-option :value="2">否</a-select-option>
            </a-select>
          </div>
        </div>
        <div class="single-search-item">
          <a-button type="primary" @click="startRefresh">查询</a-button>
          <a-button type="primary" @click="reSet" style="margin-left:20px"
            >重置</a-button
          >
        </div>
      </div>
    </div>
    <a-alert type="info" showIcon style="margin: 20px 0 15px 0;">
      <template slot="message">
        <!-- 已选择 <span style="color:red;">{{ selectedRowKeys.length }}</span> 项 -->
        <span class="select-todo">
          <a-button size="small" @click="exportData" type="primary"
            >导出资源列表</a-button
          >
          <a-button
            @click="onAdd"
            size="small"
            type="primary"
            v-if="userType === 1"
            >新增资源</a-button
          >
        </span>
      </template>
    </a-alert>
    <a-table
      style="overflow-x: scroll;"
      :columns="listObject.columns"
      :dataSource="listObject.list"
      :loading="listObject.loading"
      :pagination="pagination"
      rowKey="id"
      @change="handleTableChange"
    >
      <span slot="order" slot-scope="text, record, index">
        <em>{{ index + 1 }}</em>
      </span>
      <span slot="isConsume" slot-scope="text">
        <span v-if="text === 1" class="success-status icon icon1">是</span>
        <span v-if="text === 2" class="error-status icon icon2">否</span>
      </span>
      <span slot="isSubscribe" slot-scope="text">
        <span v-if="text === 1" class="success-status icon icon1">订阅</span>
        <span v-if="text === 2" class="error-status icon icon2">不订阅</span>
      </span>

      <template slot="todo" slot-scope="text, record">
        <div class="table-tr-todo">
          <a href="javascript:;" @click="onDetail(record)">查看</a>
          <a-divider type="vertical" v-if="userType === 1" />
          <a href="javascript:;" @click="onEdit(record)" v-if="userType === 1"
            >编辑</a
          >
          <a-divider type="vertical" v-if="userType === 1" />
          <a-popconfirm
            v-if="userType === 1"
            title="确定删除当前记录吗?"
            @confirm="() => onDelete(record.id)"
            okText="确定"
            cancelText="取消"
          >
            <a href="javascript:;" style="color:#FF0033">删除</a>
          </a-popconfirm>
        </div>
      </template>
    </a-table>
    <resource ref="rs" @addSuccess="getList" @updateSuccess="getList" />
  </div>
</template>

<script>
import { page } from "@/api";
import resource from "./components/resource";
import config from "@/config";
import { getUser } from "@/libs/util";
export default {
  components: {
    resource
  },
  data() {
    return {
      listObject: {
        loading: false,
        list: [],
        columns: [
          {
            title: "序号",
            align: "center",
            dataIndex: "order",
            scopedSlots: { customRender: "order" },
            width: 80,
            customRender: (text, record, index) =>
              `${(this.pagination.current - 1) * this.pagination.pageSize +
                (index + 1)}`
          },
          {
            title: "表名",
            dataIndex: "tableEname",
            scopedSlots: { customRender: "tableEname" },
            align: "center"
          },
          {
            title: "表名中文名",
            dataIndex: "tableCname",
            scopedSlots: { customRender: "tableCname" },
            align: "center"
          },
          {
            title: "资源编号",
            dataIndex: "sourceId",
            scopedSlots: { customRender: "sourceId" },
            align: "center"
          },
          {
            title: "数据来源部门",
            dataIndex: "sourceDepartment",
            scopedSlots: { customRender: "sourceDepartment" },
            align: "center"
          },
          {
            title: "共享范围",
            dataIndex: "sharingRange",
            scopedSlots: { customRender: "sharingRange" },
            align: "center"
          },
          {
            title: "更新周期",
            dataIndex: "updateType",
            scopedSlots: { customRender: "updateType" },
            align: "center"
          },
          {
            title: "是否消费",
            dataIndex: "isConsume",
            scopedSlots: { customRender: "isConsume" },
            align: "center"
          },
          {
            title: "是否订阅",
            dataIndex: "isSubscribe",
            scopedSlots: { customRender: "isSubscribe" },
            align: "center"
          },
          {
            title: "操作",
            // width: 200,
            dataIndex: "todo",
            scopedSlots: {
              customRender: "todo"
            }
          }
        ]
      },
      pagination: {
        current: 1,
        pageSize: 20
      },
      getPars: {
        currentPage: 1,
        pageSize: 10
      },
      totalNum: 0,
      // selectedRowKeys: [],
      // selectedArr: []
      userType: ""
    };
  },
  created() {
    this.userType = getUser().userType;
    // debugger
    //跳转到查看明细的页数
    let currentPageObj = this.$store.state.roleType.currentPageObj;
    if (currentPageObj.pageName == "zcmx") {
      this.getPars.currentPage = currentPageObj.currentPageNum;
    }
    // console.log("currentPage:" + this.getPars.currentPage);
    this.getList();
  },
  computed: {},
  mounted() {},
  methods: {
    onAdd() {
      this.$refs.rs.show();
    },
    onDetail(record) {
      //存储当前浏览页信息
      this.$store.commit("roleType/setCurrentPageNum", {
        pageName: "zcmx",
        currentPageNum: this.getPars.currentPage
      });
      // console.log("当前页数：" + this.getPars.currentPage);
      this.$router.push({
        name: "data_exchange_zcmx_detail",
        params: { id: record.sourceId }
      });
    },
    onEdit(record) {
      this.$refs.rs.show(record);
    },
    onDelete(id) {
      page
        .deleteTable({ id: Number(id) })
        .then(res => {
          if (res.data.code === -1) {
            this.$message.warning(res.data.message);
          } else {
            this.$message.success("删除记录成功！");
            this.getList();
          }
        })
        .catch(() => {
          this.$message.warning("删除记录失败");
        });
    },
    // onSelectChange(selectedRowKeys, selectedRows) {
    //   this.selectedArr = [];
    //   this.selectedRowKeys = selectedRowKeys;
    //   if (selectedRows.length > 0) {
    //     // this.selectedArr = selectedRows;
    //     selectedRows.forEach(item => {
    //       this.selectedArr.push(item.id);
    //     });
    //   }
    // },
    exportData() {
      // let params = Object.assign(this.selectedArr, this.getPars);
      this.getPars = Object.assign(this.getPars, { pageSize: this.totalNum });
      page
        .optionExport(this.getPars)
        .then(res => {
          if (res.data.code === -1) {
            this.$message.warning(res.data.message);
          } else {
            let url = res.data.data.filePath;
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = config.fileUrl + url;
            link.setAttribute("download", "资源列表数据导出.xlsx");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            // this.$message.success("导出成功！");
            this.getPars.pageSize = 10;
          }
        })
        .catch(() => {
          this.$.warning("导出失败");
        });
    },
    onSelectType() {
      this.getPars.currentPage = 1;
      // this.getList();
    },
    startRefresh() {
      this.getPars.currentPage = 1;
      this.getList();
    },
    reSet() {
      this.getPars = {
        currentPage: 1,
        pageSize: 10,
      };
      this.getList();
    },
    handleTableChange(pagination, filters, sorter) {
      this.getPars.currentPage = pagination.current;
      this.getList();
    },
    getList() {
      this.listObject.loading = true;
      page.getSourceTableList(this.getPars).then(res => {
        let { current, size, total } = res.data.data;
        this.listObject.list = res.data.data.records;
        this.listObject.loading = false;
        this.totalNum = res.data.data.total;
        this.setPagination(current, size, total);
      });
    },
    setPagination(current, size, total) {
      this.pagination = {
        current: current,
        pageSize: size,
        total: total,
        showQuickJumper: true,
        showTotal: total => `共 ${total} 条记录`
      };
    }
  }
};
</script>

<style scoped lang="less">
.title {
  font-size: 24px;
  color: #333333ff;
  padding-bottom: 10px;
  border-bottom: 2px solid #ccccccff;
}
.select-todo button {
  margin-left: 20px;
}
.btnBox {
  position: relative;
  height: 145px;
  overflow: hidden;
  margin-top: 30px;
  .btn {
    margin-left: 12px;
    margin-top: 10px;
  }
  .box {
    position: absolute;
    right: 0;
    top: 0;
    .single-search-item {
      // display: inline-block;
      float: left;
      width: 400px;
      padding: 10px;
    }
    .item-label {
      display: inline-block;
      width: 100px;
    }
    .item-content {
      display: inline-block;
      width: 240px;
    }
  }
}
</style>
